<template>
     <!-- 登录 -->
     <div class="login_box">
          <div class="login">
               <div class="login_title">商品管理系统</div>
               <input type="text" v-model="auto" class="login_auto">
               <input type="text" v-model="password" class="login_password">
               <button class="submit_login" @click="toLogin">
                    登录
               </button>
          </div>
     </div>
</template>


<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import router from "@/router"
import { login } from "@/api/index"
import { ref } from "vue"
//账号
const auto = ref("");

//密码
const password = ref('')

//登录
const toLogin = () => {
     login({ auto: auto.value, password: password.value }).then((res) => {
          //登录成功
          if (res.data.code == 200 && res.data.data) {
               localStorage.setItem("token", "token")
               localStorage.setItem("user", JSON.stringify(res.data.data))
               router.push("/")
          }
          ElMessage({
               message: res.data.msg,
               type: 'warning',
          })
     }).catch((err) => {
          console.log(err)
     })
}

</script>


<style scoped>
.login_box {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100vw;
     height: 100vh;
}

.login {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
     width: 400px;
     height: 300px;
     border-radius: 10px;
     background-color: rgba(130, 128, 128, 0.374);
     transform: translateY(-25%);
}

.login_box .login_title {
     font-weight: 700;
     font-size: 20px;
     color: rgb(68, 137, 249);
}

.login_box input {
     width: 300px;
     height: 40px;
     text-indent: 1rem;
}

.login_box .submit_login {
     border: 0;
     color: rgb(246, 248, 249);
     background-color: rgb(71, 174, 243);
     width: 300px;
     height: 40px;
     border-radius: 5px;
}
</style>